<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8"/>
	<title>YesPaper</title>
	<link rel="stylesheet" href="personalpage/css/personalmain.css">
	<link rel="stylesheet" href="personalpage/css/pdfbox.css">
	<link rel="stylesheet" href="personalpage/css/change.css">
	<link rel="stylesheet" href="utils/css/icon.css">
	<link rel="Shortcut Icon" href="utils/img/logo.ico" type="image/x-icon"/>
	<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'>
	<link rel="stylesheet" href="personalpage/css/style.css">
	<script src="utils/js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script src="personalpage/js/personal.js" type="text/javascript" charset="utf-8"></script>
</head>

<body >
<div id="main">
	<!--Floating selection bar-->
	<div class="out_box_main">
		<div class="top_menu auto_main">
			<div style="width: 150px; height: 60px; display: flex; align-items: center; justify-content: center;margin-left: -120px;">
				<img src="personalpage/img/logo1.jpg" style="width: 150px; height: 60px;"/>
			</div>
			<div class="top_menu_left">
				<div class="top_menu_item" @click="jumpToIndex()">Homepage</div>
				<div class="top_menu_item" @click="jumpToArticle()">Searchpage</div>
			</div>
			<div class="top_menu_right">
				<div class="top_menu_item" style="width: 200px;"><input class="top_input" v-model="searchCon"></div>
				<div class="top_menu_item" style="width: 120px;" @click="doSearch">Search Papers</div>
				<img id="b1" class="user_image" :src="userimg" style="border: 2px solid #F3F5F6; width: 40px; height: 40px;margin-right: 20px;">
				<div id="v1">
					<div id="s2">
						<div class="show_information">
							<a class="log_out">
								<img :src="userimg" alt="user_picture"></a>
							<div class="log_out">
								<a><span class="user_name" id="usernameonly">[[${session.user.username}]]</span></a>
								<div class="university">
									<a>University: <b id="user_experience">[[${session.user.university}]]</b></a><br /><br />
									<div class="log_out_link" @click="logout"><a>Log out</a></div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!--Top frontal picture-->
	<div class="out_box_main" id="top_img">
		<div class="auto_main">
			<div style="margin-top: 30px;display: flex;">
				<!--The outer border of the head-->
				<div class="user_image" style="width: 150px;height: 150px;">
					<!--head portrait-->
					<div class="circle automax"><a>
						<div class="spinner automax"></div>
						<div class="img automax"><img :src="userimg" alt="img"></div>
					</a></div>
				</div>
				<div style="margin: 30px 0 0 30px; color: #FFFFFF;" >
					<div style="font-weight: 600;font-size: 24px;display: inline-block">[[${session.user.username}]]</div>
					<div style="font-weight: 200;font-size: 14px;display: inline-block;margin-left: 30px;font-family:'Helvetica Neue'">[[${session.user.type}]]</div>
					<div style="font-size: 14px;margin-top: 10px;">[[${session.user.signature}]]</div>
					<!-- Small icon on the top right -->
					<div class="little_mark">
						<div class="item follows"><div class="num_of_pub" title="published times" style="cursor:pointer;"><a><em>[[${session.papernum}]]</em></a><span>Published times </span></div></div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!--Main content-->
	<div class="out_box_main" style="margin-top: 50px;">
		<div class="auto_main" style="display: flex;">
			<!--Left column-->
			<div class="side_box" style="width:250px;">
				<!--Content of left column(width: 200px)-->
				<ul>
					<li v-for="item in options" :id="item.id" :class="{leftchecked:item.id==nowId}"
						@click="changeOptions(item.id)" style="list-style-type: none;" v-if="item.show">
						<a class="active" style="position: relative; display: flex; align-items: center;">
							<span class="icon iconfont" :class="[item.icon,{leftchecked:item.id==nowId}]" style="font-size: 25px;color: #93999f; padding: 2px 2px 0 0;"></span>
							<span style="line-height: 30px;">{{item.text}}</span>
							<div style="width: 0px; border-width: 24px 0px 24px 16px; border-style: solid; border-color: rgb(255, 255, 255) rgb(255, 255, 255) rgb(255, 255, 255) rgba(255, 255, 255, 0); position: absolute; right: 0px; top: 0px;"></div>
						</a>
					</li>
				</ul>
			</div>
			<!--Right column-->
			<div class="side_box" style="width:1200px;margin-bottom: 50px">
				<!-- My paper interface -->
				<div class="right_one" v-if="nowId==1">
					<!-- Top navigation bar -->
					<div class="side_tab">
						<div class="tool-left" style="display: flex; flex-direction: row;">
							<div :id="rightOnes[0].id" @click="changeRightone(rightOnes[0].id)">
								<a class="sort_item" style="margin-left: 32px;" :class="{sorted: rightOnes[0].id==rightOneid}">Unpublished</a>
							</div>

							<div :id="rightOnes[1].id" @click="changeRightone(rightOnes[1].id)">
								<a class="sort_item" :class="{sorted: rightOnes[1].id==rightOneid}">Published</a>
							</div>
						</div>
					</div>
					<!-- The paper list -->
					<!-- The first function in right-one -->
					<div class="whole-paper-list" v-if="rightOneid=='sent'" th:each="paper: ${session.ownpaper}">
						<div class="paper_list">
							<div class="paper_picture">
								<a>
									<img src="personalpage/img/OIP.jpg" style="width: 126px" alt="文章" class="img">
								</a>
							</div>
							<div class="paper_info">
								<a>
									<span class="title">[[${paper.title}]]</span><br /><br />
									<span class="intro">[[${paper.date}]]</span><br /><br />
									<span class="intro">[[${paper.state}]]</span>
								</a>
							</div>
							<div class="content_button" style="left: 730px">
								<a class="side_button" th:@click="|showAddBox('${paper.address}','${paper.id}')|">View more</a>
							</div>
							<div class="content_button">
								<a class="side_button" th:@click="|publish('${paper.id}')|">Publish</a>
							</div>

						</div>
					</div>
					<!-- The second function in right-one -->
					<div class="whole-paper-list" v-if="rightOneid=='wait'" th:each="paper: ${session.ownpubpaper}">
						<div class="paper_list">
							<div class="paper_picture">
								<a>
									<img src="personalpage/img/OIP.jpg" style="width: 126px" alt="文章" class="img">
								</a>
							</div>
							<div class="paper_info">
								<a>
									<span class="title">[[${paper.title}]]</span><br /><br />
									<span class="intro">[[${paper.date}]]</span><br /><br />
									<span class="intro">[[${paper.state}]]</span>
								</a>
							</div>
							<div class="content_button" style="left: 730px">
								<a class="side_button" th:@click="|showAddBox('${paper.address}','${paper.id}')|">View more</a>
							</div>
							<div class="content_button">
								<a class="side_button" th:@click="|delpaper('${paper.id}')|">Delete</a>
							</div>

						</div>
					</div>

				</div>
				<!-- Personal information editing interface -->
				<div class="right_two" v-if="nowId==2">
					<div class="side_tab">
						<div class="tool-left">
							<a class="sort_item active sorted" style="margin-left: 32px;">Edit personal information</a>
						</div>
					</div>
					<div class="profile">
						<!-- upload head portrait -->
						<div class="personal_profile">
							<div class="profile_left">
								<div class="left_text text_avatar">Head portrait :</div>
							</div>
							<div class="profile_right ">
								<img id="person_img" :src="userimg" class="profile-modify-avatar">
								<a id="upload_avatar" class="upload_avatar_btn" href="/imguploadpage">Upload picture</a>
							</div>
						</div>

						<!-- Choose university -->
						<div class="personal_profile">
							<div class="profile_left">
								<div class="left_text text_nikname">University: </div>
							</div>
							<div class="profile_right">
								<div class="input_nickname">
									<input id="uni" type="text" th:value="${session.user.university}">
									<span class="nickname_tip">Please fill in the full name of the university</span>
								</div>
							</div>
						</div>
						<!-- E-mail -->
						<div class="personal_profile">
							<div class="profile_left">
								<div class="left_text text_nikname">E-mail</div>
							</div>
							<div class="profile_right">
								<div class="input_nickname">
									<input id="ema" type="text" th:value="${session.user.email}">
								</div>
							</div>
						</div>
						<!-- Choose profession field -->
						<div class="personal_profile">
							<div class="profile_left">
								<div class="left_text">Professional field</div>
							</div>
							<div class="profile_right">
								<div class="interest_tags">
									<div style="color:red;">Please choose from the fields below</div>
								</div>
								<div class="interest-tags-content">
									<a v-for="(i,index) in subjects" id="intester_0" class="tags_btn" title="IOT" @click="clicksub(index)" :key="index" :class="{a_subject:i.judge}">{{i.name}}</a>
								</div>
							</div>
						</div>
						<!-- Personal introduction -->
						<div class="personal_profile">
							<div class="profile_left">
								<div class="left_text">My introduction: </div>
							</div>
							<div class="profile_right">
								<div class="about-me_text" style="position: relative;">
									<textarea id="introTextContent" class="textContent" cols="30" rows="10">[[${session.user.signature}]]</textarea>
									<div class="num_box" style="position: absolute;top: 57px;right: 10px;">
									<span class="nickname_tip">
										<span class="word_length" style="color:#666">0</span>/<span class="word_limit">140</span>
									</span>
									</div>
								</div>
							</div>
						</div>
						<!-- Birthdate -->
						<div class="personal_profile">
							<div class="profile_left">
								<div class="left_text ">Date of birth</div>
							</div>
							<div class="profile_right">
								<input id="birthdate" type="date" th:value="${session.user.birthdate}"/>
							</div>
						</div>
						<div class="personal_profile">
							<div class="profile_right">
								<button @click="show_information()" type="button" class="save_button save_button_primary"><span>Save</span></button>
							</div>
						</div>
						<!-- Change password  -->
						<div class="personal_profile">
							<div class="profile_left">
								<div class="left_text text_nikname">Password:</div>
							</div>
							<div class="profile_right">
								<div class="input_nickname">
									<input id="un" type="text" autocomplete="off" v-model="editpass">
									<span class="nickname_tip">Please enter a high-security password</span>
								</div>
							</div>
						</div>
						<div class="personal_profile">
							<div class="profile_left">
								<div class="left_text text_nikname">Confirm password:</div>
							</div>
							<div class="profile_right">
								<div class="input_nickname">
									<input id="duun" type="text" autocomplete="off" v-model="dueditpass">
									<span class="nickname_tip">Consistent with the password above</span>
								</div>
							</div>
						</div>
						<div class="personal_profile">
							<div class="profile_right">
								<button @click="changePass" type="button" class="save_button save_button_primary" style="margin: 30px 50px 0 50px;"><span>Change password</span></button>
							</div>
						</div>
					</div>
				</div>
				<!-- Personal information editing end	 -->

				<div class="right_three" v-if="nowId==3">
					<div class="side_tab">
						<div class="tool-left" style="display: flex; flex-direction: row;">
							<div :id="rightOnes[0].id" @click="changeRightone(rightOnes[0].id)">
								<a class="sort_item" style="margin-left: 32px;" :class="{sorted: rightOnes[0].id==rightOneid}">Modifiable papers</a>
							</div>
						</div>
					</div>
					<!-- Paper list -->
					<div class="whole-paper-list" th:each="paper: ${session.ownpaper}">
						<div class="paper_list">
							<div class="paper_picture">
								<a>
									<img src="personalpage/img/OIP.jpg" style="width: 126px" alt="文章" class="img">
								</a>
							</div>
							<div class="paper_info">
								<a>
									<span class="title">[[${paper.title}]]</span><br /><br />
									<span class="intro">[[${paper.date}]]</span><br /><br />
									<span class="intro">[[${paper.state}]]</span>
								</a>
							</div>
							<div class="content_button">
								<a class="side_button" th:@click="|showEditBox('${paper.address}','${paper.id}')|">Edit</a>
							</div>
						</div>
					</div>
				</div>

				<!-- Upload paper file -->
				<div class="right_five" v-if="nowId==4" style="margin: 30px; padding-top: 0px; line-height: 40px;">
					<div class="side_tab">
						<div class="tool-left">
							<a class="sort_item active sorted" style="margin-left: 32px;">Submit paper</a>
						</div>
						<!-- fill in paper's information -->
						<div class="container">
							<form id="paper" style="padding-left: 10px; width: 800px;">
								<h3 style="margin-top: 10px;">Submit your paper</h3>
								<h4>Please enter the following information before submitting the file</h4>
								<fieldset>
									<input name="title" placeholder="Title" type="text" tabindex="1">
								</fieldset>
								<fieldset>
									<input name="type" placeholder="University" type="text" tabindex="2">
								</fieldset>
								<fieldset>
									<input name="keyword" placeholder="Key word" type="text" tabindex="3">
								</fieldset>
								<fieldset>
									<textarea name="abstracts" placeholder="Abstract" tabindex="4" style="width: 830px; height: 168px;max-width: 100%;"></textarea>
								</fieldset>
								<!-- upload file -->
								<fieldset>
									<br/>
									<h4>Please upload your file here</h4>
									<input type="file" name="pdf" id="file"><br>
									<div id="progress">
										<div class="progress_item"></div>
									</div><br/>
								</fieldset>
								<fieldset>
									<button type="button" onclick="submitPaper()">Submit</button>
								</fieldset>
							</form>
						</div>
					</div>
				</div>

				<!-- My review part (for reviewers)	 -->
				<div class="right_seven" v-if="nowId==5">
					<div class="side_tab">
						<div class="tool-left" style="display: flex; flex-direction: row;">
							<div :id="rightSevens[0].id" @click="changeRightseven(rightSevens[0].id)">
								<a class="sort_item active sorted" style="margin-left: 32px;" :class="{sorted:rightSevens[0].id==rightSevenid}">Review state</a>
							</div>

						</div>
					</div>

					<!-- The first function in right-seven -->
					<div class="whole-pdf-box" v-if="rightSevenid=='notFinished'" th:each="paper2: ${session.revpaper}">
						<!--Content of the right column( width: 1000px)-->
						<div class="paper_list" style="width: 95%;">
							<div class="paper_picture">
								<a>
									<img src="personalpage/img/review.png" style="width: 126px" alt="文章" class="img">
								</a>
							</div>
							<div class="paper_info">
								<a>
									<span class="title">[[${paper2.title}]]</span><br /><br />
									<span class="intro">[[${paper2.date}]]</span>
								</a>
							</div>
							<div class="content_button">
								<a class="side_button" th:@click="|showReviewBox('${paper2.address}','${paper2.id}')|">Review</a>
							</div>
						</div>
					</div>
					<!-- The second function in right-seven -->
					<div class="whole-pdf-box" v-if="rightSevenid=='Finished'">
						right-seven-test2
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- Pop-box1 -->
	<div style="width: 100%;height: 100vh;position:fixed;top: 0;left: 0;z-index: 3000;background-color: rgba(0, 0, 0, 0.8); overflow-y: scroll;" v-show="addBox">
		<div style="width: 100%;height: 100%;position: relative;">
			<!-- Close button -->
			<a class="icon iconfont icon-cha" style="position: absolute;top: 30px;right: 30px;font-size: 30px;color: rgb(255, 255, 255);" @click="showAddBox(false)"></a>
			<!-- Start-->
			<div class="general_info" style="width: 80%; margin: 0 auto;background-color: white;margin-bottom: 20px;margin-top: 20px;border-radius: 6px">
				<div class="general_info1">
					<h2>{{currentPaper.title}}</h2>
					<span style="font-weight: 350;font-size: 18px;">Author: {{currentPaper.author}}</span><br />
					<span style="font-weight: 350;font-size: 18px;">University: {{currentPaper.type}}</span>
				</div>
				<div class="general_info2" style="margin: 0 120px;text-align: justify;">
					<h4 style="display: inline;">Abstract: {{currentPaper.abstracts}}</h4>
					<span></span><br />
					<h4>Key words: {{currentPaper.keyword}}</h4>
					<span></span><br />
					<div style="background-color: white;_height: 200px;min-height:200px;text-align: justify;padding: 20px">
						<h4>Comments: </h4>
						<ul style="list-style: none;" v-for="com in currentPaper.comments">
							<li><span style="font-weight: bold">Contents: </span>{{com.content}} </li>
							<li style="margin-bottom: 13px;"><span style="font-weight: bold">Reviewer: </span>{{com.reviewer}} <span style="font-weight: bold">&nbsp&nbsp&nbsp&nbsp Reviewed time: </span>{{com.date}} <span style="font-weight: bold">&nbsp&nbsp&nbsp&nbsp State: </span>{{com.ok}}</li>
						</ul>
					</div>
				</div>
			</div>
			<div id="pdfcon" style="width: 80%;height: 100vh;border: 2px solid #000000;margin-top:10px; margin-bottom: 20px; padding: 0;margin:0 auto;">
			</div>
		</div>
	</div>
	<!-- Pop-box1 end -->

	<!-- Pop-box2 -->
	<div style="width: 100%;height: 100vh;position:fixed;top: 0;left: 0;z-index: 3000;background-color: rgba(0, 0, 0, 0.8);" v-show="reviewBox">
		<div style="display: flex;width: 100%;height: 100%;position: relative;">
			<!-- Close Button -->
			<a class="icon iconfont icon-cha" style="position: absolute;top: 30px;right: 30px;font-size: 30px;color: rgb(255, 255, 255);" @click="showReviewBox(false)"></a>
			<!-- Start-->
			<div id="pdfrev" style="flex:2;width: 100%;height: 100vh;border: 2px solid #000000;margin-top:10px; margin-bottom: 20px; padding: 0;">
			</div>
			<div style="flex:1;">
				<h4 style="color: white;margin: 50px;">Pass / Reject</h4>
				<div class="wrapper">
					<div class="switch_box box_4">
						<div class="input_wrapper">
							<input type="checkbox" class="switch_4" v-model="okok">
							<svg class="is_checked" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 426.67 426.67">
								<path d="M153.504 366.84c-8.657 0-17.323-3.303-23.927-9.912L9.914 237.265c-13.218-13.218-13.218-34.645 0-47.863 13.218-13.218 34.645-13.218 47.863 0l95.727 95.727 215.39-215.387c13.218-13.214 34.65-13.218 47.86 0 13.22 13.218 13.22 34.65 0 47.863L177.435 356.928c-6.61 6.605-15.27 9.91-23.932 9.91z"/>
							</svg>
							<svg class="is_unchecked" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 212.982 212.982">
								<path d="M131.804 106.49l75.936-75.935c6.99-6.99 6.99-18.323 0-25.312-6.99-6.99-18.322-6.99-25.312 0L106.49 81.18 30.555 5.242c-6.99-6.99-18.322-6.99-25.312 0-6.99 6.99-6.99 18.323 0 25.312L81.18 106.49 5.24 182.427c-6.99 6.99-6.99 18.323 0 25.312 6.99 6.99 18.322 6.99 25.312 0L106.49 131.8l75.938 75.937c6.99 6.99 18.322 6.99 25.312 0 6.99-6.99 6.99-18.323 0-25.313l-75.936-75.936z" fill-rule="evenodd" clip-rule="evenodd"/>
							</svg>
						</div>
					</div>
				</div>
				<div id="textareabox" style="resize: none;padding-left: 2%;" >
					<textarea v-model="mycom" id="comtextarea" name="comment" placeholder="Please add your comments here"></textarea>
				</div>
				<!--Edit buttons-->
				<div style="display: flex; justify-content: space-between;padding:10%;width: 60%;">
					<a class="operator" @click="addCom" v-show="!commentState">Add</a>
					<a class="operator" @click="editCom" v-show="commentState">Save</a>
					<a class="operator" @click="delCom" v-show="commentState">Delete</a>
				</div>
			</div>
		</div>
	</div>
	<!-- Pop-box2 end-->

	<!-- Pop-box3 -->
	<div style="width: 100%;height: 100vh;position:fixed;top: 0;left: 0;z-index: 3000;background-color: rgba(0, 0, 0, 0.8); overflow-y: scroll;" v-show="editBox">
		<div style="width: 100%;height: 100%;position: relative;">
			<!-- Close Button -->
			<a class="icon iconfont icon-cha" style="position: absolute;top: 30px;right: 30px;font-size: 30px;color: rgb(255, 255, 255);" @click="showEditBox(false)"></a>
			<!-- Start-->
			<div class="general_info" style="width: 50%; margin: 0 auto;background-color: white;margin-bottom: 20px;margin-top: 20px;border-radius: 6px;height: 610px;padding: 45px">
				<h3>Modify your paper information here</h3>
				<form id="paperedit">
					<input name="id" v-model="currentPaper.id" style="display: none">
					<div class="personal_profile">
						<div class="profile_left">
							<div class="left_text text_nikname">Title:</div>
						</div>
						<div class="profile_right">
							<div class="input_nickname">
								<input type="text" name="title" v-model="currentPaper.title" style="width: 90%">
								<span class="nickname_tip">Edit title here</span>
							</div>
						</div>
					</div>

					<div class="personal_profile">
						<div class="profile_left">
							<div class="left_text text_nikname">University:</div>
						</div>
						<div class="profile_right">
							<div class="input_nickname">
								<input type="text" name="type" v-model="currentPaper.type" style="width: 90%">
								<span class="nickname_tip">Edit university here</span>
							</div>
						</div>
					</div>
					<div class="personal_profile">
						<div class="profile_left">
							<div class="left_text text_nikname">Key word:</div>
						</div>
						<div class="profile_right">
							<div class="input_nickname">
								<input type="text" name="keyword" v-model="currentPaper.keyword" style="width: 90%">
								<span class="nickname_tip">Edit key word here</span>
							</div>
						</div>
					</div>
					<div class="personal_profile">
						<div class="profile_left">
							<div class="left_text text_nikname">Abstract:</div>
						</div>
						<div class="profile_right">
							<div class="input_nickname">
								<textarea v-model="currentPaper.abstracts" style="width: 550px; height: 100px;" name="abstracts"></textarea>
								<span class="nickname_tip">Edit abstract here</span>
							</div>
						</div>
					</div>
					<h4>Re-upload your file here</h4>
					<input type="file" name="pdf"><br>
					<button @click="updatePaper()" type="button" class="save_button save_button_primary" style="left: 25%;width:110px"><span>Save change</span></button>
					<button @click="deletePaper()" type="button" class="save_button save_button_primary" style="left: 40%;width:110px"><span>Delete paper</span></button>
				</form>
			</div>
		</div>
	</div>
	<!-- Pop-box3 end -->

	<footer class="footer">
		<hr />
		<br />
		<p>CopyRight@copy2021: <a href="#"> YESPAPER </a> ALL RIGHT RESERVED</p>
		<p>Contact information: </p>
		<div class="social-btns">
			<a id="i1" class="btn wechat" href="#" ><i class="fa fa-wechat"></i></a>
			<a id="i2" class="btn qq" href="#"><i class="fa fa-qq"></i></a>
			<a id="i3" class="btn weibo" href="#"><i class="fa fa-weibo"></i></a>
			<div id="iBox1" style="height: 150px;top: 100px;position: absolute;width: 150px;right: 350px;"><img src="personalpage/img/wechat.jpg" alt="img"></div>
			<div id="iBox2" style="height: 150px;top: 100px;position: absolute;width: 150px;right: 350px;"><img src="personalpage/img/QQ.jpg" alt="img"></div>
			<div id="iBox3" style="height: 150px;top: 100px;position: absolute;width: 150px;right: 350px;"><img src="personalpage/img/wechat.jpg" alt="img"></div>
		</div>
	</footer>

</div>
<!--main end-->
</body>
<script>
	window.onload = function(){
		var a = document.getElementById("b1");
		var b = document.getElementById("v1");
		var c = document.getElementById("s2");
		b.style.display = "none";
		a.onmouseover = function(){
			b.style.display = "block";
		};
		a.onmouseout = function(){
			b.style.display = "none";
		};
		b.onmouseover=function(){
			b.style.display="block";
		};
		b.onmouseout = function(){
			b.style.display = "none"
		};
		c.onmouseover=function(){
			b.style.display="block";
		};
		c.onmouseout = function(){
			b.style.display = "none"
		};

		var i1=document.getElementById("i1");
		var iBox1=document.getElementById("iBox1");
		iBox1.style.display="none";
		i1.onmouseover=function(){
			iBox1.style.display="block";
		};
		i1.onmouseout=function(){
			iBox1.style.display="none";
		};

		var i2=document.getElementById("i2");
		var iBox2=document.getElementById("iBox2");
		iBox2.style.display="none";
		i2.onmouseover=function(){
			iBox2.style.display="block";
		};
		i2.onmouseout=function(){
			iBox2.style.display="none";
		};

		var i3=document.getElementById("i3");
		var iBox3=document.getElementById("iBox3");
		iBox3.style.display="none";
		i3.onmouseover=function(){
			iBox3.style.display="block";
		};
		i3.onmouseout=function(){
			iBox3.style.display="none";
		};
	};
	var main = new Vue({
		el: "#main",
		data: {
			searchCon: "",
			count: 22222,
			choice:[],
			options:[
				{text:'My papers', id:'1',icon:"icon-caidanlan-shengchan-shengchandan",show:true},
				{text:'Personal information', id:'2',icon:"icon-caidanlan-kehu-kehuguanli",show:true},
				{text:'Modify papers', id:'3',icon:"icon-caidanlan-hetong-hetongdingdan",show:true},
				{text:'Submit papers', id:'4',icon:"icon-caidanlan-caigou-gongyingshangguanli",show:true},
				{text:'My review', id:'5',icon:"icon-caidanlan-kefu-kefujilu",show:true}
			],
			rightOnes:[
				{id:'sent'},
				{id:'wait'},
				{id:'draft'}
			],
			rightSevens:[
				{id:'notFinished'},
				{id:'Finished'}
			],
			nowId:'1',
			rightOneid:'sent',
			rightSevenid:'notFinished',
			editpass: '',
			dueditpass: '',
			isstudent: true,
			subjects:[
				{judge: false, name: "Artificial intelligence"},
				{judge: false, name: "IOT"},
				{judge: false, name: "Big data"},
				{judge: false, name: "Automatic operation"},
				{judge: false, name: "Database"},
				{judge: false, name: "Cloud Security"},
				{judge: false, name: "Microservices architecture"},
				{judge: false, name: "Programming language"},
				{judge: false, name: "Cloud Computing"},
				{judge: false, name: "Cloud Storage"}
			],
			subjects_true: true,
			// 弹出窗口(默认收回)
			addBox: false,
			reviewBox:false,
			editBox:false,
			// 弹出pdf的id
			thispdfid: 0,
			username: '[[${session.user.username}]]',
			usertype: '[[${session.user.type}]]',
			userfield: '[[${session.user.field}]]',
			university: '[[${session.user.university}]]',
			userid: '[[${session.user.id}]]',
			userimg: '',
			papers: [],
			currentPaper: {
				abstracts: "",
				address: "",
				author: "",
				date: "",
				id: "",
				keyword: "",
				reviewer: "",
				state: "",
				title: "",
				type: "",
				university: '',
				comments: []
			},
			// 打开的当前论文评论状态
			commentState: false,
			okok: false,
			mycom: ""
		},

		//Automatic execution at the end of rendering (loading required data, initialization of Vue variable)
		mounted(){
			var returnValue = this.dataRequest("/getall", "post", [{name:"aaa",value:"asdas"}]);
			if (returnValue.code) {
				this.papers = JSON.parse(returnValue.papers);
			}
			this.isstudent = this.usertype == "student";
			for(var i=0;i<this.subjects.length;i++){
				if(this.userfield.includes(this.subjects[i].name)){
					this.subjects[i].judge = true;
				}
			}
			// Set up Avatar
			var retimg = this.dataRequest("/getuserimg", "post", [{name:"aaa",value:"asdas"}]);
			if(retimg.code){
				this.userimg = 'files/' + retimg.img + '.png';
			} else{
				this.userimg = 'personalpage/img/user.jpg';
			}
			// Set visible area
			if(this.usertype=="reviewer"){
				this.options[0].show = this.options[2].show = this.options[3].show = false;
				this.nowId = 5;
			}else if(this.usertype=="writer"||this.usertype=="university"){
				this.options[4].show = false;
			}

		},
		methods: {
			main: function(){
				console.log("hello");
			},
			doSearch(){
				this.dataRequest("/search", "post",
						[{name:"content",value:this.searchCon},{name:"type",value:""}]);
				window.location.href ="/searchpage";
			},
			logout(){
				window.location.href ="/logout";
			},

			// Switch pages
			changeOptions:function(index){
				this.nowId=index;
			},
			changeRightone:function(index){
				this.rightOneid=index;
			},
			changeRightseven:function(index){
				this.rightSevenid=index;
			},

			//Select professional field (edit personal information)
			clicksub: function(index){
				this.subjects[index].judge=!this.subjects[index].judge;
			},

			// Get and display data
			show_information(){
				// var nicheng=document.getElementById('un').value;
				var xuexiao=document.getElementById('uni').value;
				var youxiang=document.getElementById('ema').value;
				var jianjie=document.getElementById('introTextContent').value;
				var shengri=document.getElementById('birthdate').value;
				var field = this.subjects;
				var field_list = [];
				for(var i=0;i<field.length;i++){
					if(field[i].judge){
						field_list.push(field[i].name);
					}
				}
				var ret_field = "";
				for(var j=0;j<field_list.length;j++){
					ret_field = ret_field + field_list[j] + ";";
				}
				var ret = this.dataRequest('/updateinfo', 'post', [
					{name:'id',value:this.userid},
					{name:'signature',value:jianjie},
					{name:'email',value:youxiang},
					{name:'university',value:xuexiao},
					{name:'field',value:ret_field},
					{name:'birthdate',value:shengri}
				]);
				if(ret.code){
					alert(ret.msg);
				}
			},

			// Change password (edit personal information)
			changePass(){
				console.log(this.editpass);
				console.log(this.dueditpass);
				if(this.editpass===""){
					alert("Password cannot be empty!");
				}else if(this.editpass!==this.dueditpass){
					alert("Two passwords do not match!");
				}else{
					var ret = this.dataRequest('/updatepass', 'post', [
						{name:'id',value:this.userid},
						{name:'password',value:this.editpass}
					]);
					if(ret.code){
						alert(ret.msg);
					}
					location.reload();
				}
			},
			notAbleToChange(){
				this.isstudent = this.usertype == "student";
				alert("Please contact the administrator to modify this!");
			},

			// Control of three pop ups
			showAddBox(add, id){
				if(add){
					document.body.style.overflowY = "hidden";
					document.getElementById("pdfcon").innerHTML = '<embed width="100%" height="100%" src="pdfs/'+ add +'.pdf"/>';
					// console.log(this.papers)
					for(var i=0;i<this.papers.length;i++){
						if(this.papers[i].id==id){
							this.currentPaper = this.papers[i];
							this.currentPaper.university = this.university;
							this.currentPaper.comments = JSON.parse(this.dataRequest('/getcomment', 'post', [{name:'id',value:this.papers[i].id}]).comments);
							// console.log(this.currentPaper.comments);
							break;
						}
					}
					// console.log(this.currentPaper);
				}else{
					document.body.style.overflowY = "auto";
				}
				this.addBox = !this.addBox;
			},
			showReviewBox(add, pid){
				if(add){
					document.body.style.overflowY = "hidden";
					this.thispdfid = parseInt(pid);
					document.getElementById("pdfrev").innerHTML = '<embed width="100%" height="100%" src="pdfs/'+ add +'.pdf"/>';
					ret = JSON.parse(this.dataRequest('/getcomment', 'post', [{name:'id',value:this.thispdfid}]).comments);
					this.mycom = "";
					for(var i=0;i<ret.length;i++){
						if(ret[i].reviewer==this.username){
							console.log(ret[i]);
							this.cucomid = ret[i].id;
							this.mycom = ret[i].content;
							this.okok = ret[i].ok == "Pass";
							this.commentState = true;
							break;
						}
					}
					if(this.mycom==""){
						this.okok = false;
						this.commentState = false;
					}
				}else{
					document.body.style.overflowY = "auto";
				}
				this.reviewBox = !this.reviewBox;
			},
			showEditBox(add, id){
				if(add){
					for(var i=0;i<this.papers.length;i++){
						if(this.papers[i].id==id){
							this.currentPaper = this.papers[i];
							this.currentPaper.university = this.university;
							this.currentPaper.comments = JSON.parse(this.dataRequest('/getcomment', 'post', [{name:'id',value:this.papers[i].id}]).comments);
							break;
						}
					}
					if(this.currentPaper.comments.length===0){
						document.body.style.overflowY = "hidden";
					}else{
						alert("This paper has been already audited. Please contact with your university to edit it!");
						return 0;
					}
				}else{
					document.body.style.overflowY = "auto";
				}
				this.editBox = !this.editBox;
			},

			// CRUD operations of comments
			addCom(){
				var content = this.mycom;
				var ok = "";
				if(this.okok){
					ok = "Pass";
				}else{
					ok = "Fail";
				}
				var ret = this.dataRequest('/createcomment', 'post', [
					{name:'paperid',value:this.thispdfid},
					{name:'reviewer',value:this.username},
					{name:'content',value:content},
					{name:'ok',value:ok}
				]);
				console.log("添加评论状态 " + ret.code);
				alert("Added Successfully!");
				location.reload();
			},
			editCom(){
				var content = this.mycom;
				var ok = "";
				if(this.okok){
					ok = "Pass";
				}else{
					ok = "Fail";
				}
				var ret = this.dataRequest('/updatecomment', 'post', [
					{name:'id',value:this.cucomid},
					{name:'paperid',value:this.thispdfid},
					{name:'reviewer',value:this.username},
					{name:'content',value:content},
					{name:'ok',value:ok}
				]);
				console.log("修改评论状态 " + ret.code);
				alert("Updated Successfully!");
				location.reload();
			},
			delCom(){
				if(confirm("Are you sure you want to delete this comment? The confirmed state will be deleted as well!")){
					var ret = this.dataRequest('/deletecomment', 'post', [
						{name:'id',value:this.cucomid}
					]);
					console.log("删除评论状态 " + ret.code);
					alert("Deleted Successfully!");
					location.reload();
				}
			},

			// Edit papers
			updatePaper(){
				var ret = this.formRequest('/updatepaper', 'post', 'paperedit');
				if(ret.code){
					console.log("修改论文状态 " + ret.code);
					alert("Updated Successfully!");
					location.reload();
				}else{
					alert("Updated Failed, Try again!");
				}
			},
			deletePaper(){
				if(confirm("Are you sure you want to delete this paper?")){
					var ret = this.dataRequest('/deletepaper', 'post', [
						{name:'id',value:this.currentPaper.id}
					]);
					if(ret.code){
						console.log("删除论文状态 " + ret.code);
						alert("Delete Successfully!");
						location.reload();
					}else{
						alert("Delete Failed, Try again!");
					}
				}
			},
			publish(publishid){
				if(confirm("Are you sure you want to publish this paper?")){
					var ret = this.dataRequest('/publishpaper', 'post', [
						{name:'id',value:publishid}
					]);
					if(ret.code){
						console.log("发表状态 " + ret.code);
						alert("Publish Successfully!");
						location.reload();
					}else{
						alert("This paper can not be published yet!");
					}
				}
			},
			delpaper(id){
				if(confirm("Are you sure you want to delete this paper? This operation is not reversible!")){
					var ret = this.dataRequest('/deletepaper', 'post', [
						{name:'id',value:id}
					]);
					if(ret.code){
						console.log("删除论文状态 " + ret.code);
						alert("Delete Successfully!");
						location.reload();
					}else{
						alert("This paper can not be deleted!");
					}
				}
			},

			// Control of page jump
			jumpToIndex(){
				location.href="/";
			},
			jumpToArticle(){
				location.href="/searchpage";
			},

			// Request
			dataRequest(url, method, data) {
				/* Data encapsulation */
				var fd = new FormData();
				for(var i=0;i<data.length;i++){
					fd.append(data[i].name, data[i].value);
				}
				/* Send data */
				var xhr = new XMLHttpRequest();
				let ret = false;
				xhr.onreadystatechange= function() {
					if (xhr.readyState == 4) {
						if (xhr.status == 200 || xhr.status == 304) {
							ret = JSON.parse(xhr.responseText);
						}
					}
				}
				xhr.open(method, url, false);
				xhr.send(fd);
				return ret;
			},
			formRequest(url, method, id) {
				/* Data encapsulation */
				var fd = new FormData(document.getElementById(id));
				/* Send data */
				var xhr = new XMLHttpRequest();
				let ret = false;
				xhr.onreadystatechange= function() {
					if (xhr.readyState == 4) {
						if (xhr.status == 200 || xhr.status == 304) {
							ret = JSON.parse(xhr.responseText);
						}
					}
				}
				xhr.open(method, url, false);
				xhr.send(fd);
				return ret;
			}
		}
	});
</script>
</html>
